<template>
  <el-container>
    <el-header style="background-color: white; color: black;">考情信息</el-header>
    <el-main>
      <el-button type="success" icon="el-icon-check" round="" :disabled="isDisabled" @click="addWorkTime">上班打卡</el-button>
      <el-button type="warning" round="" :disabled="isDisabled2" @click="addQuitTime">下班打卡</el-button>
      <el-button @click="test">test</el-button>
      <el-form :inline="true" :model="question" class="demo-form-inline">
        <el-form-item label="姓名">
          <el-input v-model="question.quContent" placeholder="请输入姓名"></el-input>
        </el-form-item>

        <el-form-item label="部门">
          <el-select v-model="question.quType" placeholder="请选择部门">
            <el-option label="人力资源部" value="人力资源部"></el-option>
            <el-option label="市场部" value="市场部"></el-option>
            <el-option label="研发部" value="研发部"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
          <!-- <el-button type="primary" @click="add">新增员工</el-button> -->
        </el-form-item>
      </el-form>

      <el-table :data="list" style="width: 100%;">
        <!-- 列 -->
        <el-table-column label="部门编号" prop="quId" width="100"></el-table-column>
        <el-table-column label="部门名称" prop="quContent" width="100"></el-table-column>
        <el-table-column label="员工编号" prop="quType" width="100"></el-table-column>
        <el-table-column label="姓名" prop="quScore" width="100"></el-table-column>
        <el-table-column label="签到时间" prop="quAnswer" width="120"></el-table-column>
        <el-table-column label="签退时间" prop="quAnswer" width="120"></el-table-column>
        <el-table-column label="考勤日期" prop="quAnswer" width="120"></el-table-column>
        <el-table-column label="迟到次数" width="200">
          <!--  <template slot-scope="x">
                    <el-button type="success" size="mini" @click="update(x.row)">编辑</el-button>
                    <el-button type="warning" size="mini" @click="del(x.row)">删除</el-button>
                  </template> -->
        </el-table-column>
        <el-table-column label="早退次数" width="200"></el-table-column>

      </el-table>
     <!-- <div class="block">
        <!-- size-change：下拉框触发事件 -->
        <!-- current-change 页码触发事件 -->
        <!-- current-page 当前页码 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="question.page" :page-sizes="[5, 10, 20, 40]" :page-size="5"
          layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div> -->

      <!-- 新增、修改弹出框 -->
      <!-- <el-dialog :title="title" width="50%" :visible.sync="isShow">
        <el-form :model="qs" label-width="80px">

          <el-form-item label="工号">
            <el-col :span="5">
              <input type="hidden" v-model="qs.quId">
              <el-input v-model="qs.quContent"></el-input>
            </el-col>
          </el-form-item> -->

          <!-- <div v-show="isOption">
            <el-form-item label="密码">
              <el-col :span="5">
                <el-input v-model="qs.quAoption"></el-input>
              </el-col>
            </el-form-item>

            <el-form-item label="部门">
              <el-select v-model="qs.quType" placeholder="请选择部门">
                <el-option label="人力资源部" value="人力资源部"></el-option>
                <el-option label="市场部" value="市场部"></el-option>
                <el-option label="研发部" value="研发部"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="B选项">
              <el-col :span="20">
                <el-input v-model="qs.quBoption"></el-input>
              </el-col>
            </el-form-item>

            <el-form-item label="C选项">
              <el-col :span="20">
                <el-input v-model="qs.quCoption"></el-input>
              </el-col>
            </el-form-item>

            <el-form-item label="D选项">
              <el-col :span="20">
                <el-input v-model="qs.quDoption"></el-input>
              </el-col>
            </el-form-item>
          </div> -->

         <!-- <el-form-item label="题型">
            <el-col :span="20">
              <el-select v-model="qs.quType" @change="showOp">
                <el-option label="单选题" value="单选题"></el-option>
                <el-option label="多选题" value="多选题"></el-option>
                <el-option label="判断题" value="判断题"></el-option>
              </el-select>
            </el-col>
          </el-form-item>

          <el-form-item label="分数">
            <el-col :span="20">
              <el-input v-model="qs.quScore"></el-input>
            </el-col>
          </el-form-item>
          </el-form-item> -->

          <!-- <el-form-item label="答案">
            <el-col :span="20">
              <template v-if="qs.quType=='单选题'">
                <el-radio v-model="qs.quAnswer" label="A"></el-radio>
                <el-radio v-model="qs.quAnswer" label="B"></el-radio>
                <el-radio v-model="qs.quAnswer" label="C"></el-radio>
                <el-radio v-model="qs.quAnswer" label="D"></el-radio>
              </template>
              <template v-if="qs.quType=='多选题'">
                <el-checkbox-group v-model="qs.more">
                  <el-checkbox label="A"></el-checkbox>
                  <el-checkbox label="B"></el-checkbox>
                  <el-checkbox label="C"></el-checkbox>
                  <el-checkbox label="D"></el-checkbox>
                </el-checkbox-group>
              </template>
              <template v-if="qs.quSex=='性别'">
                <el-radio v-model="qs.quAnswer" label="男"></el-radio>
                <el-radio v-model="qs.quAnswer" label="女"></el-radio>
              </template>
            </el-col>
          </el-form-item> -->

         <!-- <el-form-item>
            <el-button type="success" size="mini" @click="save">保存</el-button>
          </el-form-item> -->
        </el-form>
      </el-dialog>
    </el-main>
  </el-container>
</template>

<script>
  export default {
    name: "question",
    data() {
      return {
        list: [], //当前页集合
        totalPage: "", //总页数
        total: 0, //总条数
        question: { //分页对象
          page: 1,
          row: 5,
          quContent: "",
          quType: ""
        },
        title: "新增",
        isShow: false,
        isOption: true,
        qs: {
          quContent: "",
          quAoption: "",
          quBoption: "",
          quCoption: "",
          quDoption: "",
          quType: "选择部门",
          quScore: "",
          quAnswer: "",
          quSex: "",
          more: []
        },
        user:{
          userId:0,
          departmentId:0
        },
        workNote:{
          workId:0,
          userId:0,
          date:"",
          workTime:"",
          quitTime:"",
          late:"",
          early:"",
        },
        isDisabled:false,
        isDisabled2:false
      }
    },
    methods: {
      addWorkTime(){
        var user = sessionStorage.getItem("user");
        this.user.userId = user.userId;
        this.user.departmentId = user.getDepartmentId;
        var self = this;
        this.$http.post("http://localhost:8080/work-note/addWorkTime", this.$qs.stringify(this.user))
        .then(function(res){
          self.$message(res.data.info);
          if(res.data.success){
            self.isDisabled=true;
          }else{

          }
        })
      },
      addQuitTime(){
        var user = sessionStorage.getItem("user");
        this.user.userId = user.userId;
        this.user.departmentId = user.getDepartmentId;
        var self = this;
        this.$http.post("http://localhost:8080/work-note/addWorkTime", this.$qs.stringify(this.user))
        .then(function(res){
          self.$message(res.data.info);
          if(res.data.success){
            self.isDisabled=true;
          }else{

          }
        })
      },
      search(){

      },
      test(){
        console.log("test");
      }
      // loadData() { //加载题库
      //   var self = this;
      //   this.$http.get("/question/list", {
      //       params: this.question
      //     })
      //     .then(function(rs) {
      //       if (rs.data.success) {
      //         self.list = rs.data.data.list;
      //         self.totalPage = rs.data.data.totalPage;
      //         self.total = rs.data.data.total;
      //       }
      //     })
      // },
      // 下拉框触发事件
      // handleSizeChange(v) {
      //   this.question.row = v;
      //   this.loadData();
      // },
      // handleCurrentChange(v) {
      //   this.question.page = v;
      //   this.loadData();
      // },
      // add() { //打开新增弹窗
      //   this.isShow = true;
      //   this.title = "新增";
      //   //清空
      //   this.qs = {
      //     more: [],
      //     quType: "单选题"
      //   };
      // },
      // update(obj) {
      //   //打开修改弹窗
      //   this.isShow = true;
      //   this.title = "修改";
      //   this.qs = obj;
      //   //数据回显
      //   if (obj.quType == "多选题") {
      //     //清空
      //     this.qs.more = [];
      //     for (var i = 0; i < obj.quAnswer.length; i++) {
      //       this.qs.more.push(obj.quAnswer[i]);
      //     }
      //   }
      //   this.showOp();
      // },
      // save() {
      //   if (this.qs.quType == "判断题") {
      //     this.qs.quAoption = null;
      //     this.qs.quBoption = null;
      //     this.qs.quCoption = null;
      //     this.qs.quDoption = null;
      //   }
      //   if (this.qs.quType == "多选题") {
      //     //清空
      //     this.qs.quAnswer = "";
      //     if (this.qs.more.length > 0) {
      //       for (var i = 0; i < this.qs.more.length; i++) {
      //         this.qs.quAnswer += this.qs.more[i];
      //       }
      //     }
      //   }
      //   console.log(this.qs)
      //   //定义 请求url
      //   var url = "";
      //   if (this.title == "新增") {
      //     url = "/question/add";
      //   } else {
      //     url = "question/update";
      //   }
      //   var self = this;
      //   this.$http.get(url, {
      //       params: this.qs
      //     })
      //     .then(function(rs) {
      //       self.$message(rs.data.info);
      //       if (rs.data.success) {
      //         //关闭弹窗
      //         self.isShow = false;
      //         //刷新数据
      //         self.loadData();
      //       }
      //     })
      // },
      // showOp() {
      //   if (this.qs.quType == "判断题") {
      //     this.isOption = false;
      //   } else {
      //     this.isOption = true;
      //   }
      // },
      // del(obj) {
      //   var self = this;
      //   this.$confirm("你确定要删除吗", "提示")
      //     .then(function() {
      //       //ajax请求
      //       self.$http.get("/question/del", {
      //           params: obj
      //         })
      //         .then(function(rs) {
      //           self.$message(rs.data.info);
      //           if (rs.data.success) {
      //             //刷新数据
      //             self.loadData();
      //           }
      //         })
      //     })
      // },

    },
    mounted() {
      // this.loadData();
    }
  }
</script>

<style>
</style>
